<template>
  <div class="tags-container">
    <!-- 根据pinia store中的内容渲染tag -->
    <Tag
      v-for="(val, index) in tagList.List"
      :key="index"
      :class="{ active: val.active }"
      :val="val.name"
    >
      {{ val.name }}</Tag
    >
    <addLabel>添加新标签</addLabel>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import Tag from "./Tag.vue";
import addLabel from "./addLabel.vue";
import { useTagLists } from "./../../store";

let store = useTagLists();
const tagList = reactive({
  //根据pinia中的tags数组渲染子Tag标签
  List: store.Tags,
});
</script>

<style scoped lang="less">
.tags-container {
  padding-left: 18px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  background-color: rgb(245, 245, 245);
  height: 28vh;
}
.active {
  background-color: rgb(27, 27, 27);
  color: white;
}
</style>
